<template>
  <div class="assetProtection">
    <el-col style="margin-bottom: 20px">
      <div class="title">电催记录</div>
      <el-col v-for="(phone , index) in phones">
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>记录{{index+1}}</span></el-col>
          <el-col :span="8"><span>催收人：{{phone.collectorStaffName}}</span></el-col>
          <el-col :span="8"><span>催收日期：{{phone.collectDate}}</span></el-col>
        </el-row>
        <el-row style="margin:10px 0 20px 0">
          <el-col>
            <span style="background-color: #F9FAFC;padding: 5px 0px 5px 10px">催收记录：{{phone.remark}}</span>
          </el-col>
        </el-row>
      </el-col>
    </el-col>
    <el-col style="margin-bottom: 20px">
      <div class="title">上门催收记录</div>
      <el-col v-for="visitRecord in records">
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>催收人：{{visitRecord.collectorStaffName}}</span></el-col>
          <el-col :span="8"><span>催收日期：{{visitRecord.collectDate}}</span></el-col>
          <el-col :span="8"><span>催收结果：{{visitRecord.status}}</span></el-col>
        </el-row>
        <el-row style="margin:10px 0 20px 0">
          <el-col>
            <span style="background-color: #F9FAFC;padding: 5px 0px 5px 10px">催收记录：{{visitRecord.remark}}</span>
          </el-col>
        </el-row>
      </el-col>
    </el-col>
    <el-col style="margin-bottom: 20px">
      <div class="title">拖车记录</div>
      <el-col v-for="trailerRecord in trailerRecords">
        <div @click="refreshInfo(trailerRecord)">
          <el-row style="margin-bottom: 10px">
            <el-col :span="8"><span>执行人：{{trailerRecord.execStaffName}}</span></el-col>
            <el-col :span="8"><span>停放地：{{trailerRecord.location}}</span></el-col>
            <el-col :span="8"><span>拖车日期：{{trailerRecord.towingDate}}</span></el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="8"><span>拖车费用：{{trailerRecord.towingCost}}</span></el-col>
            <el-col :span="8"><span>停车费用：{{trailerRecord.parkingCost}}</span></el-col>
            <el-col :span="8"><span>车架号：{{trailerRecord.vin}}</span></el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="8"><span>发动机号：{{trailerRecord.engineNo}}</span></el-col>
            <el-col :span="8"><span>取车日期：{{trailerRecord.pickupDate}}</span></el-col>
            <el-col :span="8"><span>保管时间：{{trailerRecord.time}}</span></el-col>
          </el-row>
          <el-row style="margin:10px 0 20px 0">
            <el-col><span style="background-color: #F9FAFC;padding: 5px 0px 5px 10px">拖车记录：{{trailerRecord.towingRemark}}</span></el-col>
          </el-row>
        </div>
      </el-col>
    </el-col>
    <el-col style="margin-bottom: 20px">
      <div class="title">法院诉讼</div>
      <el-col v-for="court in courts">
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>函表交银行日期：{{court.indictmentSubmitDate}}</span></el-col>
          <el-col :span="8"><span>银行办证日期：{{court.registrateDate}}</span></el-col>
          <el-col :span="8"><span>法院受理日期：{{court.courtAcceptDate}}</span></el-col>
        </el-row>
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>执行法院：{{court.execCourt}}</span></el-col>
          <el-col :span="8"><span>立案日期：{{court.filingDate}}</span></el-col>
          <el-col :span="8"><span>立案法院：{{court.filingCourt}}</span></el-col>
        </el-row>
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>案号：{{court.caseNo}}</span></el-col>
          <el-col :span="8"><span>诉讼标的：{{court.lawsuitSubject}}</span></el-col>
          <el-col :span="8"><span>诉讼费用：{{court.lawsuitFee}}</span></el-col>
        </el-row>
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>律师费：{{court.attorneyFee}}</span></el-col>
        </el-row>
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>备注：{{court.remark}}</span></el-col>
        </el-row>
      </el-col>
      <div style="position:fixed;bottom: 0;left:200px;right:0;background-color: white" v-if="isShowCallDialog">
        <el-form :model="callRecordDialog" label-position="left" label-width="80px" style="margin-left:80px;margin-top:20px">
          <el-form-item label="催收人">
            <el-input v-model="callRecordDialog.collectorStaffName" style="width:300px" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="电催日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="callRecordDialog.collectDate" style="width:300px"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="催收记录">
            <el-input type="textarea" v-model="callRecordDialog.remark" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitCallRecord">保存</el-button>
            <el-button @click="isShowCallDialog=false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
    <el-dialog title="分配外勤" :visible.sync="assignFormVisible" :modal-append-to-body='false'>
      <el-form :model="form" style="margin-left:80px">
        <el-radio-group v-model="assignRadio">
          <el-radio v-for="(value, index) in groupList" :label="value.deptId">{{value.deptName}}</el-radio>
        </el-radio-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="assignFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="SubmitDistribute">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增上门催收记录" :visible.sync="visitFormVisible" :modal-append-to-body='false'>
      <el-form :model="visitRecordDialog" label-position="left" label-width="80px" style="margin-left:80px">
        <el-form-item label="催收人">
          <!-- <el-input v-model="visitRecordDialog.collectorStaffId" style="width:300px"></el-input> -->
          <el-select v-model="visitRecordDialog.collectorStaffId" placeholder="请选择" @visible-change="visitList" style="width:300px">
            <el-option
              v-for="staff in visitStaffList"
              :key="staff.value"
              :label="staff.label"
              :value="staff.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="催收日期">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="visitRecordDialog.collectDate" style="width:300px"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="催收记录">
          <el-input type="textarea" v-model="visitRecordDialog.remark" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="催收结果">
          <el-radio-group v-model="visitRecordDialog.status">
            <el-radio label="1">成功</el-radio>
            <el-radio label="0">失败</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitVisitRecord">确定</el-button>
          <el-button @click="visitFormVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="新增拖车记录" :visible.sync="carFormVisible" :modal-append-to-body='false'>
      <el-form :model="carRecordDialog" label-position="left" label-width="80px" style="margin-left:80px">
        <el-form-item label="执行人">
          <!-- <el-input v-model="carRecordDialog.execStaffId" style="width:300px" :disabled="isDisable"></el-input> -->
          <el-select v-model="carRecordDialog.execStaffName" placeholder="请选择" @visible-change="carList" style="width:300px" :disabled="isDisable">
            <el-option
              v-for="staff in carStaffList"
              :key="staff.value"
              :label="staff.label"
              :value="staff.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="停放地">
          <el-input v-model="carRecordDialog.location" style="width:300px" :disabled="isDisable"></el-input>
        </el-form-item>
        <el-form-item label="拖车日期">
          <el-col :span="11">
            <el-date-picker :disabled="isDisable" type="date" placeholder="选择日期" v-model="carRecordDialog.towingDate" style="width:300px"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="拖车费用">
          <el-input v-model="carRecordDialog.towingCost" style="width:300px" :disabled="isDisable"></el-input>
        </el-form-item>
        <el-form-item label="停车费用">
          <el-input v-model="carRecordDialog.parkingCost" style="width:300px" :disabled="isDisable"></el-input>
        </el-form-item>
        <el-form-item label="拖车记录">
          <el-input type="textarea" v-model="carRecordDialog.towingRemark" style="width:300px" :disabled="isDisable"></el-input>
        </el-form-item>
        <el-form-item label="取车日期">
          <el-date-picker type="date" @change="OnPick" placeholder="选择日期" v-model="carRecordDialog.pickupDate" style="width:300px"></el-date-picker>
        </el-form-item>
        <el-form-item label="保管时间">
          <el-input v-model="carRecordDialog.time" style="width:300px" :disabled="isDisable"></el-input>
        </el-form-item>
        <el-form-item>
          <upload class="upload" ref="carPic"></upload>
        </el-form-item>
      </el-form>
      <span style="margin-left:160px">
        <el-button type="primary" @click="submitCarRecord">确定</el-button>
        <el-button @click="carFormVisible=false">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新增法院诉讼" :visible.sync="courtFormVisible" :modal-append-to-body='false'>
      <el-form :model="courtRecordDialog" label-position="left" label-width="110px" style="max-height: 500px;overflow: auto; margin-left:80px">
        <el-form-item label="函表交银行日期">
            <el-date-picker style="width:300px" type="date" placeholder="选择日期" v-model="courtRecordDialog.indictmentSubmitDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="银行办证日期">
            <el-date-picker style="width:300px" type="date" placeholder="选择日期" v-model="courtRecordDialog.registrateDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="法院受理日期">
            <el-date-picker style="width:300px" type="date" placeholder="选择日期" v-model="courtRecordDialog.courtAcceptDate" ></el-date-picker>
        </el-form-item>
        <el-form-item label="执行法院">
          <el-input style="width:300px" v-model="courtRecordDialog.execCourt" ></el-input>
        </el-form-item>
        <el-form-item label="立案日期">
            <el-date-picker style="width:300px" type="date" placeholder="选择日期" v-model="courtRecordDialog.filingDate" ></el-date-picker>
        </el-form-item>
        <el-form-item label="立案法院">
          <el-input style="width:300px" v-model="courtRecordDialog.filingCourt"></el-input>
        </el-form-item>
        <el-form-item label="案号">
          <el-input style="width:300px" v-model="courtRecordDialog.caseNo" ></el-input>
        </el-form-item>
        <el-form-item label="诉讼标的">
          <el-input style="width:300px" v-model="courtRecordDialog.lawsuitSubject"></el-input>
        </el-form-item>
        <el-form-item label="诉讼费用">
          <el-input style="width:300px" v-model="courtRecordDialog.lawsuitFee"></el-input>
        </el-form-item>
        <el-form-item label="律师费用">
          <el-input style="width:300px" v-model="courtRecordDialog.attorneyFee"></el-input>
        </el-form-item>
         <el-form-item label="备注">
          <el-input style="width:300px" type="textarea" v-model="courtRecordDialog.remark" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitCourtRecord">确定</el-button>
          <el-button @click="courtFormVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-col>
      <el-button @click="assign" v-show="isShowButton">分配外勤</el-button>
      <div style="float: right">
        <el-button type="primary" @click="addPhone" v-show="isShowButton">新增电催记录</el-button>
        <el-button type="primary" @click="addVisit">新增上门催收记录</el-button>
        <el-button type="primary" @click="addCarRecord">新增拖车记录</el-button>
        <el-button type="primary" @click="addCourtRecord" v-show="isShowButton">新增法院诉讼</el-button>
      </div>
    </el-col>
  </div>
</template>
<script>
  import ElCol from "element-ui/packages/col/src/col";
  import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
  import $ from 'jquery'
  export default{
    name:'urgeManage',
    components: {
      ElButton,
      ElCol,
      upload:require('../../components/other/upload')},
    data(){
      return{
        orderNo_1:'',
        isShowButton:true,
        isShowCallDialog:false,
        callStaffList:[],
        visitStaffList:[],
        carStaffList:[],
        isDisable:false,
        groupList:[],
        customerIdCard:'',
        orderNo:'',
        assignRadio:'',
        assignFormVisible:false,
        visitFormVisible:false,
        carFormVisible:false,
        courtFormVisible:false,
        phones:[],
        records:[],
        trailerRecords:[],
        courts:[],
        visitRecordDialog:{collectorStaffId:'',collectDate:'',remark:'',status:''},
        carRecordDialog:{execStaffName:'',location:'',towingDate:'',location:'',towingCost:'',parkingCost:'',pickupDate:'',towingRemark:'',time:''},
        courtRecordDialog:{indictmentSubmitDate:'',registrateDate:'',courtAcceptDate:'',execCourt:'',filingDate:'',
                    filingCourt:'',caseNo:'',lawsuitSubject:'',lawsuitFee:'',attorneyFee:'',remark:''},
        callRecordDialog:{collectorStaffId:'',collectDate:'',remark:''},
        _orderNo:'',
        customerIdCard:this.$route.query.customerIdCard,
        customerName:this.$route.query.customerName,
        currentDate:'',
        assetsAnnexGroup:'',
        annexBatchNo:''
      }
    },
    methods: {
      assign(){
        this.assignFormVisible=true
      },

      addPhone(){
        this.isShowCallDialog = true
      },

      addVisit(){
        this.visitFormVisible=true
      },

      addCarRecord(){
        this.carFormVisible=true
        this.carRecordDialog={execStaffName:'',location:'',towingDate:'',location:'',towingCost:'',parkingCost:'',pickupDate:'',towingRemark:''}
        this.isDisable = false
        this.$nextTick(()=>{
          this.$refs.carPic.type=1;
          this.$refs.carPic.isOne=false;  
          this.$refs.carPic.group=4;
          this.$refs.carPic.id=this.annexBatchNo;
        })
      },

      addCourtRecord(){
        this.courtFormVisible=true
      },
      //新增电催记录
      submitCallRecord(){
        let that = this
        this.callRecordDialog.orderNo = this._orderNo
        this.callRecordDialog.customerIdCard = this.customerIdCard
        this.callRecordDialog.collectType = '0'
        this.callRecordDialog.collectorStaffId=sessionStorage.getItem('staffId')
        this.$http.post("/overdue/detail/callingdebt",this.callRecordDialog)
        .then((response)=>{
          if(response.data.success){
            that.getPageDetail(that._orderNo)
            this.isShowCallDialog = false
            this.$message('添加成功')
          }else{
            this.$message('添加失败')
          }
        })
        .catch(function(error){
          console.log(error)
        })
      },
      //新增上门催收记录
      submitVisitRecord(){
        let that = this
        this.visitRecordDialog.orderNo = this._orderNo
        this.visitRecordDialog.customerIdCard = this.customerIdCard
        this.visitRecordDialog.collectType = '1'
        console.log("visitRecordDialog:"+JSON.stringify(this.visitRecordDialog))
        this.$http.post("/overdue/detail/visitdebt",this.visitRecordDialog)
        .then((response)=>{
          console.log(response)
          if(response.data.success){
            that.getPageDetail(that._orderNo)
            this.$message('添加成功')
            this.visitFormVisible = false
          }else{
            this.$message('添加失败')
          }
        })
        .catch(function(error){
          console.log(error)
        })
      },
      //新增拖车记录
      submitCarRecord(){
        let that = this
        this.carRecordDialog.orderNo = this._orderNo
        this.carRecordDialog.customerIdCard = this.customerIdCard
        if(this.carRecordDialog.towingId==null){
          this.carRecordDialog.execStaffId = this.carRecordDialog.execStaffName
        }
        this.$http.post("/overdue/detail/towinghis",this.carRecordDialog)
        .then((response)=>{
          console.log(response)
          if(response.data.success){
            that.getPageDetail(that._orderNo)
            this.$message('添加成功')
            this.carFormVisible=false
          }else{
            this.$message('添加失败')
          }
        })
        .catch(function(error){
          console.log(error)
        })
      },
      //新增法院诉讼
      submitCourtRecord(){
        let that =this
        this.courtRecordDialog.orderNo = this._orderNo
        this.courtRecordDialog.customerIdCard = this.customerIdCard
        console.log("courtRecordDialog:"+JSON.stringify(this.courtRecordDialog))
        this.$http.post("/overdue/detail/lawsuit",this.courtRecordDialog)
        .then((response)=>{
          console.log(response)
          if(response.data.success){
            that.getPageDetail(that._orderNo)
            this.$message('添加成功')
            this.courtFormVisible = false
          }else{
            this.$message('添加失败')
          }
        })
        .catch(function(error){
          console.log(error)
        })
      },
      //根据overdueId查询页面详情
      getPageDetail(orderNo){
        let that = this
        this._orderNo=orderNo
        //this.getVisitStaffList(orderNo)
        this.$http.get("/overdue/detail/order/"+orderNo)
        .then((response)=>{
          this.phones = response.data.data.callingDebtList
          $.each(response.data.data.visitDebtList, function(index , value){
            if(value.status=='0'){
              value.status = '失败'
            }else{
              value.status = '成功'
            }
          })
          this.records = response.data.data.visitDebtList
          this.courts = response.data.data.lawsuitHisList  
          this.trailerRecords = response.data.data.towingHisList
          this.assetsAnnexGroup=response.data.data.assetsAnnexGroup;
          this.annexBatchNo=response.data.data.annexBatchNo;
        })
        .catch(function(error){
          console.log(error)
        })
      },
      //获取分配外勤的分组列表
      getGroupList(){
        this.$http.get("/overdue/outWorkerDept/list")
        .then((response)=>{
          console.log("groupList:"+response)
          this.groupList = response.data.data
        })
        .catch(function(error){
          console.log(error)
        })
      },
      //提交分组数据
      SubmitDistribute(){
        var group = {}
        group.orderNo = this._orderNo
        group.customerIdCard = this.customerIdCard
        group.deptId = this.assignRadio
        group.customerName = this.customerName
        this.$http.post("/overdue/detail/distribute/visit",group)
        .then((response)=>{
          console.log(response)
          if(response.data.success){
            this.assignFormVisible = false
            this.$message("提交成功")
          }else{
            this.$message("提交失败")
          }
        })
        .catch(function(error){
          console.log(error)
        })
      },
      //保存拖车记录取车日期
      refreshInfo(record){
        this.carFormVisible = true
        this.isDisable = true
        this.currentDate = record.towingDate
        this.carRecordDialog.execStaffName = record.execStaffName
        this.carRecordDialog.location = record.location
        this.carRecordDialog.towingDate = new Date(record.towingDate)
        this.carRecordDialog.towingCost = record.towingCost
        this.carRecordDialog.parkingCost = record.parkingCost
        this.carRecordDialog.towingRemark = record.towingRemark
        this.carRecordDialog.execStaffId = record.execStaffId
        this.carRecordDialog.towingId=record.towingId
      },
      OnPick(date){
        console.log(date)
        if(date==null){
          this.carRecordDialog.time=''
        }else{
          var startDate = new Date(this.currentDate)
          var endDate = new Date(date)
          this.carRecordDialog.time=(endDate-startDate)/(24*60*60*1000)
        }
      },
      getCarStaffList(){
        let that = this
        this.carStaffList=[]
        this.$http.get("/overdue/assetProtect/outWorker/list")
        .then((response)=>{
          $.each(response.data.data, function(index, value){
            that.carStaffList.push({value:value.staffId,label:value.staffName})
          })
        })
        .catch(function(error){
          console.log(error)
        })
      },
      getVisitStaffList(orderNo){
        let that = this
        this.visitStaffList=[]
        this.$http.get("/overdue/collect/outWorker/list",{
          params:{
            orderNo:orderNo
          }
        })
        .then((response)=>{
          $.each(response.data.data, function(index, value){
            that.visitStaffList.push({value:value.staffId,label:value.staffName})
          })
        })
        .catch(function(error){
          console.log(error)
        })
      },
      /*getCallStaffList(){
        let that = this
        this.callStaffList =[]
        this.$http.get("/overdue/assetProtect/staff/list")
        .then((response)=>{
          $.each(response.data.data, function(index, value){
            that.callStaffList.push({value:value.staffId,label:value.staffName})
          })
        })
        .catch(function(error){
          console.log(error)
        })
      },*/

      visitList(temp){
        if(temp){
          this.getVisitStaffList(this._orderNo)
        }
      },

      carList(temp){
        if(temp){
          this.getCarStaffList()
        }
      },

      /*callList(temp){
        if(temp){
          this.getCallStaffList()
        }
      }*/
    },

    mounted(){
      this.callRecordDialog.collectorStaffName = sessionStorage.getItem('userName')
      this.phones.splice(-1,1)
      this.records.splice(-1,1)
      this.courts.splice(-1,1)
      this.trailerRecords.splice(-1,1)
      this.getGroupList()
    }
  }
</script>

<style lang="scss" scoped>

.assetProtection {
  font-size: 14px;
  color: #475669;
  padding-top: 17px;
}
.title {
  margin-bottom: 20px;
  font-size: 14px;
  color: #475669;
  padding-left: 8px;
  border-left: 3px solid #20A0FF;
}
</style>
